<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>VIP权益设置</el-breadcrumb-item>
        <el-breadcrumb-item>配置权益</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail">
      <el-form ref="rulePowerForm"  :model="rulePowerForm">
        <el-row class="mb30">
          <el-form-item label="VIP名称：" class="labelAlignment" > <span class="font18">{{rulePowerForm.vipName}}</span></el-form-item>
        </el-row>
        <el-row class="mb30">
          <el-form-item label="所属平台：" class="labelAlignment" > <span class="font18">{{rulePowerForm.deptName}}</span></el-form-item>
        </el-row>
        <el-row class="mb60">
          <el-form-item label="权益："  class="labelAlignment scoll" required label-width="90px">
            <template>
              <el-transfer 
              v-model="rulePowerForm.ruleIds" 
              :data="data" 
              :titles="['可选权限', '已选权限']"
              >
              </el-transfer>
            </template>
          </el-form-item>
        </el-row>
            <el-form-item class="btnAlignment">
              <el-button :size="size" @click="back()" type="primary" plain>{{ $t("action.cancel") }}</el-button>
              <el-button :size="size" type="primary" @click="saveRule()">保存</el-button>
            </el-form-item>
      </el-form>
    </div>


  </div>
</template>

<script>
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
  validatePhone,
  validateContacts,
  isEmail,
  isNumber
} from "@/utils/validate";
import XLSX from "xlsx";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      HEIGHT: window.innerHeight,
      startTime: null,
      endTime: null,
      data: [],
      id: this.$route.query.id,
      businessId: "",
      deptMsg: localStorage.getItem("user"), //当前登录组织信息
      userId: localStorage.getItem("userId"), //当前登录用户id
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      deptName: null,
      deptOption: [],
      content: null,
      size: "small",
      rulePowerForm: {
        id: "",
        deptId: "",
        deptName: "",
        vipName: "",
        ruleIds: []
      },
      pageResult: {},
      value: 0,
      printPage: false,
      editLoading: false,
      reviewFormRules: {},
      checked: [],
      statusList: []
    };
  },
  methods: {
    queryData() {
      let this_ = this;
      let query = {};
      query.start = 1;
      query.limit = 10;
      query.id = this.id;
      query.deleteFlag = 0;
      this_.utils.request.queryMevipRuleList(query, function(res) {
        if (res.code == "0000") {
          this_.rulePowerForm.vipName = res.data.rows[0].vipName;
          this_.rulePowerForm.deptName = res.data.rows[0].deptName;
          this_.rulePowerForm.deptId = res.data.rows[0].deptId;
          this_.rulePowerForm.id = res.data.rows[0].id;
          this_.queryMemberRuleByDeptid(res.data.rows[0].deptId);
          this_.query(res.data.rows[0].deptId, res.data.rows[0].id);
        }
      });
    },
    query(deptId, id) {
      let this_ = this;
      let query = {};
      query.deptId = deptId;
      query.vipId = id;
      query.deleteFlag = 0;
      this_.utils.request.queryVipRuleListOther(query, function(res) {
        if (res.code == "0000") {
          res.data.forEach(items => {
            this_.rulePowerForm.ruleIds.push(items.legalRuleId);
          });
        }
      });
    },
    //获取当前平台下的所有权益
    queryMemberRuleByDeptid(deptId) {
      let this_ = this;
      let query = {};
      this_.data = [];
      query.deptId = deptId;
      query.deleteFlag = 0;
      query.status=2;
      query.legalRuleType = 7;
      this_.utils.request.queryMemberRuleByDeptid(query, function(res) {
        if (res.code == "0000") {
          res.data.forEach(items => {
            this_.data.push({
              key: items.id,
              label: items.legalRuleName
            });
          });
        }
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    //保存方法
    saveRule() {
      let this_ = this;
      // let params={};
      var params = Object.assign({}, this.rulePowerForm);
      if (params.ruleIds.length == 0) {
        this_.$message({ message: "保存时至少选择一条权限", type: "error" });
        return;
      }
      this_.$confirm("确认提交吗？", "提示", {
        type: "warning",
        closeOnClickModal: false
      }).then(() => {
        this_.utils.request.saveVipRule(params, function(res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
          this_.queryData();
        });
      });
    },
    //获取子平台列表
    queryDeptOption() {
      let query = {};
      let this_ = this;
      this_.utils.request.queryChildList(query, function(res) {
        if (res.code == "0000") {
          this_.deptOption = res.data.rows[0];
        }
      });
    }
  },
  mounted() {
    this.queryData();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-transfer-panel {
  width: 250px !important;
}
.page-container-detail {
  padding: 40px 40px 60px;
}
/deep/ .el-transfer-panel {
  width: 460px !important;
  height: 318px !important;
}
.mb60 {
  margin-bottom: 60px;
}
.btnAlignment {
  // text-align: center;
  padding-left: 31%;
  /deep/ .el-button {
    width: 102px;
    height: 32px;
    margin-right: 60px;
  }
}
/deep/ .el-form-item__label {
  margin-right: 20px !important;
  font-size: 18px !important;
}
/deep/ .el-transfer__buttons {
  button {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  button:nth-child(1) {
    margin-bottom: 80px;
  }
  .el-transfer__button {
    border-radius: 35px !important;
    width: 35px;
    height: 35px !important;
    text-align: center;
    line-height: 35px !important;
    position: relative;
    span {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
    }
  }
}

// /deep/ .el-transfer__buttons button {
//   position: relative;
//   /deep/ span {
//     position: absolute;
//     top: 50%;
//     transform: translateY(-50%);
//     left: 10px;
//   }
// }
@media screen and (min-width: 1279px) and (max-width: 1919px) {
  /deep/ .el-transfer-panel {
    width: 345px !important;
    height: 218px !important;
  }
  .btnAlignment {
    // text-align: center;
    padding-left: 40.5%;
    /deep/ .el-button {
      width: 102px;
      height: 32px;
      margin-right: 60px;
    }
  }
}
</style>
